<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="true">
			设置
		</tn-nav-bar>


		<view class="tn-safe-area-inset-bottom " :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="about-shadow  tn-margin">
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">昵称</view>
						<view class="tn-color-gray " @click="nameshow=true;nickname=body.nickname">
							<text>{{body.nickname}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>

				<tn-popup v-model="nameshow" width="80%" height="300rpx" mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写昵称" name="input" maxlength="10" v-model="nickname"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savename"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
				</tn-popup>

				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
					<picker mode="date" :value="date" :start="startDate" :end="endDate"
						@change="bindDateChange">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;" >
						<view class="tn-margin-left-sm">出生日期</view>
						<view class="tn-color-gray ">
							
								<view class="uni-input">{{date}}<text class="tn-icon-right"></text></view>
							
						</view>
					</view>
					</picker>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="sexshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">性别</view>
						<view class="tn-color-gray " >
							<tn-select v-model="sexshow" mode="single" :list="sexlist"
								@confirm="confirmsex"></tn-select>
							<text>{{body.sex}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shengaoshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">身高</view>
						<view class="tn-color-gray " >
							<tn-select v-model="shengaoshow" mode="single" :list="shengaolist"
								@confirm="shengaopass"></tn-select>
							<text>{{body.shengao}}cm</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="tzshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">体重</view>
						<view class="tn-color-gray " >
							<tn-select v-model="tzshow" mode="single" :list="tizhonglist"
								@confirm="tizhongpass"></tn-select>
							<text>{{body.tizhong}}kg</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="hunshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">婚姻状况</view>
						<view class="tn-color-gray " >
							<tn-select v-model="hunshow" mode="single" :list="hunlist"
								@confirm="confirmhun"></tn-select>
							<text>{{body.hun}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
			<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="carshow=true">
				<view class="tn-flex tn-flex-row-between" style="width: 100%;">
					<view class="tn-margin-left-sm">车辆</view>
					<view class="tn-color-gray " >
						<tn-select v-model="carshow" mode="single" :list="carlist"
							@confirm="confirmcar"></tn-select>
						<text>{{body.car}}</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="homeshow=true">
				<view class="tn-flex tn-flex-row-between" style="width: 100%;">
					<view class="tn-margin-left-sm">住房</view>
					<view class="tn-color-gray " >
						<tn-select v-model="homeshow" mode="single" :list="homelist"
							@confirm="confirmhome"></tn-select>
						<text>{{body.home}}</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>
			</tn-list-cell>	
				
				
				
				
				
				
				
					<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
									<view class="tn-flex tn-flex-row-between" style="width: 100%;">
										<view class="tn-margin-left-sm">居住地</view>
										<view class="tn-color-gray ">
											<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
												{{body.new_city}} <text class="" v-if="!body.new_city">点击设置</text>
											</pick-regions>
										</view>
									</view>
								</tn-list-cell>
								<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
									<view class="tn-flex tn-flex-row-between" style="width: 100%;">
										<view class="tn-margin-left-sm">家乡</view>
										<view class="tn-color-gray ">
											<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegionold">
												{{body.old_city}} <text class="" v-if="!body.old_city">点击设置</text>
											</pick-regions>
				
										</view>
									</view>
								</tn-list-cell>
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuelishow=true" v-if="body.is_school==0">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">学历</view>
						<view class="tn-color-gray " >							
							<tn-select v-model="xuelishow" mode="single" :list="xuelilist"
								@confirm="confirmxueli"></tn-select>								
							<text>{{body.xueli}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>		
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="msg('已认证不可修改');" v-if="body.is_school==1">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">学历</view>
						<view class="tn-color-gray " >							
							<tn-select v-model="xuelishow" mode="single" :list="xuelilist"
								@confirm="confirmxueli"></tn-select>								
							<text>{{body.xueli}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>		
				
				
				

				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuexiaoshow=true;">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">毕业院校</view>
						<view class="tn-color-gray " @click="xuexiaoshow=true;">
							<text>{{body.xuexiao}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>

				<tn-popup v-model="xuexiaoshow" width="80%"  mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<block v-if="body.is_school">
						<view class="tn-flex ">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							已认证，不可修改
							</view>
						</view>
					</block>
					<block v-else>
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写毕业学校" name="input" maxlength="50" v-model="xuexiao"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savexuexiao"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
					</block>
					
					
				</tn-popup>	
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="zhiweishow=true;">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">职位</view>
						<view class="tn-color-gray " >
							<text>{{body.zhiwei}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-popup v-model="zhiweishow" width="80%"  mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<block v-if="body.is_work">
						<view class="tn-flex ">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							已认证，不可修改
							</view>
						</view>
					</block>
					<block v-else>
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写职位" name="input" maxlength="20" v-model="zhiwei"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savezhiwei"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
					</block>
				</tn-popup>	
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shourushow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">年收入</view>
						<view class="tn-color-gray " >
							<tn-select v-model="shourushow" mode="single" :list="shourulist"
								@confirm="confirmshouru"></tn-select>
							<text>{{body.shouru}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>									
									
									
									
									
			</view>

		</view>



	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		host
	} from '@/siteinfo.js'
	import getTel from '@/components/loginFn/get-tel';
	import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' //引入静默更新
	export default {
		components: {
			getTel,pickRegions
		},
		data() {
			return {
				xuexiao:'',
				xuexiaoshow:false,
				zhiwei:'',
				zhiweishow:false,
				defaultRegion: ['陕西省', '商洛市', '洛南县'],
				
				carshow:false,
				car:'不限制',
				carlist: [{
						value: '1',
						label: '已买车'
					},
					{
						value: '2',
						label: '未买车'
					}
				],
				
				homeshow:false,
				home:'不限制',
				homelist: [{
						value: '1',
						label: '租房'
					},
					{
						value: '2',
						label: '已买房'
					},
					{
						value: '3',
						label: '和父母同住'
					},
					{
						value: '4',
						label: '婚后买房'
					}
				],
				
				defaultRegionCode: '611021',
				tzshow: false,
				tizhonglist: [],
				shengaoshow: false,
				shengaolist: [],
				sexshow: false,
				sexlist: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				hunshow: false,
				hunlist: [{
						value: '1',
						label: '未婚'
					},
					{
						value: '2',
						label: '离异'
					},
					{
						value: '3',
						label: '丧偶'
					}
				],
				xuelishow: false,
				xuelilist: [{					
						label: '高中及以下'
					},
					{					
						label: '专科'
					},
					{				
						label: '本科'
					},
					{				
						label: '硕士'
					},
					{				
						label: '博士'
					}
				],
				shourushow: false,
				shourulist: [{					
						label: '5万以下'
					},
					{					
						label: '5-8万'
					},
					{				
						label: '8-10万'
					},
					{				
						label: '10-15万'
					},
					{				
						label: '15-20万'
					},
					{				
						label: '20-30万'
					},
					{				
						label: '30-50万'
					},
					{				
						label: '50万以上'
					}
				],				
				date: '请选择生日',
				nickname: '',
				nameshow: false,
				currentSize: 0,
				news: [],
				body: [],
				giftianchu: false
			}
		},
		computed: {
			startDate() {
				return '1965-01-01';
			},
			endDate() {
				return '2005-01-01';
			}
		},
		onLoad(option) {
			let that = this
			that.info()

			for (let i = 140; i < 220; i++) {
				let zhi = {
					"value": i,
					"label": i + 'cm'
				}
				this.shengaolist.push(zhi)
			}


			for (let i = 40; i < 120; i++) {
				let zhi = {
					"value": i,
					"label": i + 'kg'
				}
				this.tizhonglist.push(zhi)
			}









		},
		methods: {
			handleGetRegion(region) {
				let new_city = region[0].name + '-' + region[1].name
				this.xiugai('new_city', new_city)

			},
			handleGetRegionold(region) {
				let new_city = region[0].name + '-' + region[1].name
				this.xiugai('old_city', new_city)
			},

			shengaopass(e) {
				this.shengaoshow = false
				this.xiugai('shengao', e[0].value)
			},

			confirmshouru(e) {
				this.shourushow = false
				this.xiugai('shouru', e[0].label)
			},			
			tizhongpass(e) {
				this.tzshow = false
				this.xiugai('tizhong', e[0].value)
			},
			confirmsex(e) {
				this.sexshow = false
				this.xiugai('sex', e[0].value)
			},		
			confirmhun(e) {
				this.hunshow = false
				this.xiugai('hun', e[0].label)
			},	
			
			confirmcar(e) {
				this.carshow = false
				this.xiugai('car', e[0].label)
			},
			confirmhome(e) {
				this.homeshow = false
			    this.xiugai('home', e[0].label)
			},
			
			
			
			confirmxueli(e) {
				this.xuelishow = false
				this.xiugai('xueli', e[0].label)
			},			
			gaisex() {
				if (this.body.sfz_name) {
					this.msg('你已认证，不能修改')
					return
				}
				this.sexshow = true
			},

			bindDateChange: function(e) {
				this.date = e.detail.value
				this.xiugai('shengri', e.detail.value)
			},
			savename() {
				this.nameshow = false
				this.body.nickname = this.nickname
				this.xiugai('nickname', this.nickname)
			},
			savexuexiao() {
				this.xuexiaoshow = false			
				this.xiugai('xuexiao', this.xuexiao)
			},	
			savezhiwei() {
				this.zhiweishow = false			
				this.xiugai('zhiwei', this.zhiwei)
			},						
			savexuexiao() {
				this.xuexiaoshow = false			
				this.xiugai('xuexiao', this.xuexiao)
			},			
			closeGetTelModalFn() {
				this.showGetTelModal = false;
			},

			async info() {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/index/GetUserinfo',
					data: {
						user_id: uni.getStorageSync('user_id')
					}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.body = result.data.data;
						that.date = that.body.shengrizhi
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},

			async xiugai(name, body) {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/user/set_passmore?name=' + name + '&body=' + body,
					data: {}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						
						this.msg('设置成功')
					this.info()
						
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 用户头像 start */
	.logo-image {
		width: 210rpx;
		height: 210rpx;
		position: relative;
	}

	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 50rpx 50rpx 50rpx rgba(0, 0, 0, 0.07);
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	.bg-flex-shadow {
		background-color: #00C3FF;
		z-index: 9999;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	.tn-shadow-blurddd {
		border: 2px solid black;
	}

	.list {
		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	/* 标签内容 end*/
</style>